{include file="admin/common/header" /}
<style>
    .layui-tree-set .layui-tree-txt.on, .layui-tree-set .layui-tree-txt.on:hover {
        font-weight: 800;
        color: #1E9FFF
    }

    .layui-tree-txt {
        display: inline-block;
        width: 150px;
        overflow: hidden;
    }

    .layui-tree-iconClick {
        margin-right: 3px;
    }

    .tree-left {
        width: 286px;
        float: left;
        height: calc(100% - 24px);
        overflow-y: scroll;
        overflow-x: hidden;
        border: 1px solid #eee;
        background-color: #FAFAFA;
        padding: 12px 6px 12px 2px;
    }

    .tree-left h3 {
        font-size: 16px;
        height: 30px;
        padding-left: 10px;
        font-weight: 800
    }

    .editormd-code-toolbar select {
        display: inline;
    }

    .editormd {
        margin-bottom: 0
    }

    .editormd li {
        list-style: inherit;
    }
</style>

<div class="p-3" style="height:calc(100% - 24px)">
    <div class="tree-left">
        <h3>知识库目录</h3>
        <div id="tree"></div>
    </div>
    <div class="body-table" style="margin-left:310px; margin-bottom:0">
        <form class="layui-form">
            <table class="layui-table" style="margin-bottom:0;">
                <tr>
                    <td class="layui-td-gray">标题 <font>*</font></td>
                    <td><input type="text" value="{$detail.title}" name="title" lay-verify="required"
                               lay-reqText="请输入标题" autocomplete="off" placeholder="请输入标题" class="layui-input">
                    </td>
                    <td class="layui-td-gray">排序<font>*</font></td>
                    <td style="width:80px; text-align:center"><input type="text" name="sort" value="{$detail.sort}"
                                                                     placeholder="请输入排序，数字" autocomplete="off"
                                                                     class="layui-input"></td>
                    <td class="layui-td-gray">类型</td>
                    <td>
                        {eq name="$detail.type" value="1"}文档{/eq}
                        {eq name="$detail.type" value="2"}分组{/eq}
                        {eq name="$detail.type" value="3"}链接{/eq}
                    </td>
                </tr>
                {eq name="$detail.type" value="3"}
                <tr>
                    <td class="layui-td-gray">跳转链接 <font>*</font></td>
                    <td colspan="5">
                        <input type="text" value="{$detail.link}" name="link" lay-verify="required"
                               lay-reqText="请输入标题" autocomplete="off" placeholder="请输入标题" class="layui-input">
                    </td>
                </tr>
                {/eq}
            </table>
            {eq name="$detail.type" value="1"}
            <div style="margin-top:-2px;">
                {php}echo \support\lib\Form::editor('content','container1',$val=$detail['content'],
                'width:100%;height:400px');{/php}
            </div>
            {/eq}
            <div style="padding: 10px 0">
                <input type="hidden" name="id" value="{$id}">
                <button class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="webform">
                    <i class="layui-icon layui-icon-ok"></i>提交保存 
                </button>
            </div>
        </form>
    </div>
</div>
<!-- /主体 -->
{include file="admin/common/footer" /}
<!-- 脚本 -->
<script>
  var doc_id = '{$detail.id}';
  var book_id = '{$detail.book_id}';
  const type = '{$detail.type}';
  layui.use(['table', 'jquery', 'treetable'], function () {
    var form = layui.form, tree = layui.tree, tool = layui.tool, table = layui.table, $ = layui.jquery;

    $.ajax({
      url: "/app/book/admin/doc/doc_tree",
      data: {id: book_id},
      type: 'get',
      success: function (res) {
        //仅节点左侧图标控制收缩
        var book = tree.render({
          elem: '#tree',
          data: res.trees,
          spread: true,
          id: 'book',
          edit: ['add', 'del'], //操作节点的图标
          onlyIconControl: true,  //是否仅允许节点左侧图标控制展开收缩
          click: function (obj) {
            window.location.href = '/app/book/admin/doc/edit?id=' + obj.data.id;
          },
          operate: function (obj) {
            let type = obj.type; //得到操作类型：add、edit、del
            let data = obj.data; //得到当前节点的数据
            let elem = obj.elem; //得到当前节点元素
            if (type === 'add') { //增加节点
              add(obj.data.id);
            } else if (type === 'update') { //修改节点
              // console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
            } else if (type === 'del') { //删除节点
              let callback = function (e) {
                layer.msg(e.msg);
                setTimeout(function () {
                  $('#tree').find('.layui-tree-txt').eq(0).click();
                }, 1000)
              }
              $.post("/app/book/admin/doc/delete", {id: obj.data.id}, callback);
            }

          }
        });
        setTimeout(function () {
          $('[data-id="' + doc_id + '"]').find('.layui-tree-txt').eq(0).addClass('on');
        }, 100)

      }
    })

    //添加
    var selectTable = null;

    function add(pid) {
      var type = [{'id': 1, 'title': '新建文档'}, {'id': 2, 'title': '新建分组'}, {'id': 3, 'title': '新建链接'}];
      layer.open({
        title: '选择类型',
        type: 1,
        area: ['380px', '320px'],
        content: '<div style="width:320px; padding:5px 15px"><div id="selectType"></div></div>',
        success: function () {
          selectTable = table.render({
            elem: '#selectType',
            cols: [[ //标题栏
              {type: 'radio', title: '选择', width: 100},
              {field: 'title', title: '课程类型'}
            ]],
            data: type
          });
        },
        btn: ['确定'],
        btnAlign: 'c',
        yes: function (idx) {
          var checkStatus = table.checkStatus(selectTable.config.id);
          var data = checkStatus.data;
          if (data.length > 0) {
            if (data[0].id == 1 || data[0].id == 2) {
              layer.prompt({title: '标题', formType: 3, value: ''}, function (text, index) {
                if (text == '') {
                  layer.msg('输入标题');
                  return false;
                }
                let callback = function (e) {
                  layer.closeAll();
                  layer.msg(e.msg);
                  if (e.code == 200) {
                    setTimeout(function () {
                      window.location.href = '/app/book/admin/doc/edit?id=' + e.data;
                    }, 1000)
                  }
                }
                $.post("/app/book/admin/doc/add", {
                  book_id: book_id,
                  pid: pid,
                  type: data[0].id,
                  title: text
                }, callback);
              })
            } else if (data[0].id == 3) {
              var content = '<div style="padding:0 15px;"><table class="layui-table">\
							<tr>\
								<td class="layui-td-gray">链接标题 <font>*</font></td>\
								<td><input name="title" id="docTitle" class="layui-input" value="" placeholder="请输入标题"></td>\
							</tr>\
							<tr>\
								<td class="layui-td-gray">URL链接 <font>*</font></td>\
								<td><input name="link" id="docLink" class="layui-input" value="" placeholder="请输入链接"></td>\
							</tr>\
						</table></div>';
              layer.open({
                type: 1,
                title: '新建链接',
                area: ['480px', '300px'],
                content: content,
                success: function () {

                },
                btn: ['确定提交'],
                btnAlign: 'c',
                yes: function (idx) {
                  let docTitle = $('#docTitle').val();
                  let docLink = $('#docLink').val();
                  if (docTitle == '') {
                    layer.msg('请输入标题');
                    return;
                  }
                  if (docLink == '') {
                    layer.msg('请输入链接');
                    return;
                  }
                  let callback = function (e) {
                    layer.closeAll();
                    layer.msg(e.msg);
                    if (e.code == 200) {
                      setTimeout(function () {
                        window.location.href = '/app/book/admin/doc/edit?id=' + e.data;
                      }, 1000)
                    }
                  }
                  $.post("/app/book/admin/doc/add", {
                    book_id: book_id,
                    pid: pid,
                    type: data[0].id,
                    title: docTitle,
                    link: docLink
                  }, callback);
                }
              })
            }
          } else {
            layer.msg('请选择类型');
            return false;
          }
        }
      })
    }

    if (type == 1) {
      //监听提交
      form.on('submit(webform)', function (data) {
        console.log(data.field);
        if (data.field.content == '') {
          layer.msg('请先完善文章内容');
          return false;
        }
        let callback = function (e) {
          if (e.code == 200) {
            layer.msg("保存成功", {icon: 1, time: 1500}, function () {
              window.location.reload();
            });
          } else {
            layer.msg(e.msg);
          }
        }
        $.post("/app/book/admin/doc/edit", data.field, callback);
        return false;
      });

    } else {
      //监听提交
      form.on('submit(webform)', function (data) {
        let callback = function (e) {
          if (e.code == 200) {
            layer.msg("保存成功", {icon: 1, time: 1500}, function () {
              window.location.reload();
            });
          } else {
            layer.msg(e.msg);
          }
        }
        $.post("/app/book/admin/doc/edit", data.field, callback);
        return false;
      });
    }
  });

</script>
